<template>
	<Grid :col="3" :border="false" padding="5px">
	  <GridItem><Input  placeholder="请输入操作人员" v-model="search.user"/></GridItem>
	  <GridItem> <Input  placeholder="请输入IP地址"  v-model="search.ip"/></GridItem>
	  <GridItem><Input  placeholder="请输入操作地点"  v-model="search.address"/></GridItem>
	  <GridItem>
		  <Select style="width:100%" clearable  placeholder="请选择操作状态" v-model.number="search.state">
			  <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		  </Select>
	  </GridItem>
	  <GridItem> <DatePicker type="daterange" v-model="datetimes" confirm placement="bottom-end" placeholder="请选择操作时间" style="width: 100%;"/></GridItem>
	  <GridItem><Button v-auth:log:login:query icon="md-search" type="primary" @click="handleSearch">查询</Button></GridItem>
	</Grid>
	
</template>

<script>

export default {
  props: {
     modelValue: {type: Object, required: true} ,
  },
  emits: ["update:model-value", "search-click"],
	data() {
		return {
      search: {...this.modelValue} ,
			statusList: [{label: '登录成功',  value: 1},  {label: '登录异常', value : 0}], 
		}
	},
  computed: {
    datetimes: {
      set(array) {
        this.search.start = array[0] != "" ? this.$Date(array[0]).format("YYYY-MM-DD") : "" ;
        this.search.end = array[1] != "" ? this.$Date(array[1]).format("YYYY-MM-DD") : "" ;
      },
      get() {
        return [this.search.start ?? "", this.search.end ?? ""]
      }
    }
  },
  methods: {
    handleSearch() {
      this.$emit("update:model-value", this.search);
      this.$emit("search-click") ;
    }
  }
}

</script>

<style>
</style>